<template>
  <div>
    <div v-show="!isShowDetail">
      <jxf-titletip :title="title" @refreshPage="refreshPage"></jxf-titletip>
      <el-card class="mt20">
        <el-form :inline="true" :model="searchInfo" ref="searchInfo">
          <el-form-item label="订单号:" prop="orderNo">
            <el-input v-model="searchInfo.orderNo" @keyup.enter.native="$refs['supplyTelphone'].focus()" clearable></el-input>
          </el-form-item>
          <el-form-item label="供应商账号:" prop="supplyTelphone">
            <el-input ref="supplyTelphone" v-model="searchInfo.supplyTelphone"
                      @keyup.enter.native="$refs['supplyEnterpriseName'].focus()" clearable></el-input>
          </el-form-item>
          <el-form-item label="供应商名称:" prop="supplyEnterpriseName">
            <el-input ref="supplyEnterpriseName" v-model="searchInfo.supplyEnterpriseName"
                      @keyup.enter.native="$refs['settleStatus'].focus()" clearable></el-input>
          </el-form-item>
          <el-form-item label="结算状态:" prop="settleStatus">
            <el-select v-model="searchInfo.settleStatus" clearable placeholder="全部">
              <el-option ref="status" v-for="item in statusList" :key="item.value" :label="item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <jxf-Date :startTime.sync="searchInfo.settleStartTime" :endTime.sync="searchInfo.settleEndTime"
                    label="结算时间段："></jxf-Date>
          <jxf-Date :startTime.sync="searchInfo.payStartTime" :endTime.sync="searchInfo.payEndTime"
                    label="订单完成时间段："></jxf-Date>
          <el-form-item>
            <el-button type="primary" @click="onSearch()">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="resetForm('searchInfo')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
      <el-card class="jxf-table-card mt20">
        <div slot="header" class="clearfix">
          <span>数据列表</span>
          <div>
            <el-button type="primary" @click="exportInfo" :loading="exportLoading">导出</el-button>
          </div>
        </div>
        <jxf-table class="" :table="dataTable">
          <template slot="orderAmount" slot-scope="scope">
            <span>{{scope.row.orderAmount !== "" && scope.row.orderAmount !== null ? "￥" + scope.row.orderAmount : ""}}</span>
          </template>
          <template slot="infoAmount" slot-scope="scope">
            <span>{{scope.row.infoAmount !== "" && scope.row.infoAmount !== null ? "￥" + scope.row.infoAmount : ""}}</span>
          </template>
          <template slot="settleAmount" slot-scope="scope">
            <span>{{scope.row.settleAmount !== "" && scope.row.settleAmount !== null ? "￥" + scope.row.settleAmount : ""}}</span>
          </template>
          <template slot="payType" slot-scope="scope">
            <span>{{scope.row.payType === 0 ? "余额支付" : scope.row.payType === 1 ? "鲜丰惠支付" : scope.row.payType === 2 ? "信用支付" : ""}}</span>
          </template>
          <template slot="settleStatus" slot-scope="scope">
            <span>{{scope.row.settleStatus === 0 ? "待结算" : scope.row.settleStatus === 1 ? "已结算" : ""}}
            </span>
          </template>
          <template slot="operation" slot-scope="scope">
            <el-button type="text" @click="showDetail(scope.row)">查看详情</el-button>
            <el-button type="text" v-if="scope.row.status === 0" @click="showReview(scope.row)">审核</el-button>
          </template>
        </jxf-table>
      </el-card>
      <jxf-pagination class="mt20" :pageTotal="pageTotal" :currentPage.sync='currentPage' :pageSize.sync="pageSize"
                      @currentPageChange="currentPageChange" @pageSizeChange="pageSizeChange"></jxf-pagination>
    </div>
    <OrderInfoFeeSettlementDetail ref="OrderInfoFeeSettlementDetail" v-show="isShowDetail" :isShowDetail.sync="isShowDetail"></OrderInfoFeeSettlementDetail>
  </div>
</template>

<script>
  import formatDate from '@/assets/js/formatDate'
  import OrderInfoFeeSettlementDetail from './components/OrderInfoFeeSettlementDetail'
  export default {
    name: "OrderInfoFeeSettlement",
    components: {OrderInfoFeeSettlementDetail},
    data() {
      return {
        title: "订单信息费结算",
        statusList: [{
          label: "待结算",
          value: 0
        }, {
          label: "已结算",
          value: 1
        }],
        searchInfoBack: {
          orderNo: "",
          supplyTelphone: "",
          supplyEnterpriseName: "",
          settleStatus: "",
          settleStartTime: "",
          settleEndTime: "",
          payStartTime: "",
          payEndTime: ""
        },
        searchInfo: {
          orderNo: "",
          supplyTelphone: "",
          supplyEnterpriseName: "",
          settleStatus: "",
          settleStartTime: "",
          settleEndTime: "",
          payStartTime: "",
          payEndTime: ""
        },
        exportLoading: false,
        dataTable: {},
        currentPage: 1,
        pageSize: 10,
        pageTotal: 0,
        isShowDetail: false
      }
    },
    methods: {
      init() {
        this.dataTable = {
          border: true,
          loading: true,
          tr: [
            {
              id: '1',
              label: '订单号',
              width: '190',
              prop: 'orderNo'
            },
            {
              id: '2',
              label: '订单完成时间',
              width: '160',
              prop: 'payTime'
            },
            {
              id: '3',
              label: '供应商账号',
              minWidth: '120',
              prop: 'supplyTelphone'
            },
            {
              id: '4',
              label: '供应商企业名称',
              minWidth: '120',
              prop: 'supplyEnterpriseName'
            },
            {
              id: '5',
              label: '采购商企业名称',
              minWidth: '120',
              prop: 'enterpriseName'
            },
            {
              id: '6',
              label: '订单实收金额',
              minWidth: '120',
              show: 'template',
              prop: 'orderAmount'
            },
            {
              id: '7',
              label: '支付方式',
              show: 'template',
              prop: 'payType'
            },
            {
              id: '8',
              label: '供应商支付信息费',
              minWidth: '150',
              show: 'template',
              prop: 'infoAmount'
            },
            {
              id: '9',
              label: '结算金额',
              minWidth: '120',
              show: 'template',
              prop: 'settleAmount'
            },
            {
              id: '10',
              label: '信息费结算状态',
              minWidth: '130',
              show: 'template',
              prop: 'settleStatus'
            },
            {
              id: '11',
              label: '结算时间',
              width: '160',
              prop: 'settleTime'
            },
            {
              id: '12',
              label: '操作',
              show: 'template',
              minWidth: "100",
              prop: 'operation',
              fixed: "right"
            }
          ],
          data: []
        }
      },
      getList() {
        let info = formatData.clearObjEmptyPrama({...this.searchInfo, pageSize: this.pageSize, pageNum: this.currentPage})
        ajax.post(apis.factory.getSettleOrderList, info)
          .then(res => {
            if (res.success === true) {
              this.pageTotal = res.data.total
              if (res.data.dataList !== [] && res.data.dataList !== null) {
                this.dataTable.data = this.formatData(res.data.dataList)
              } else {
                this.dataTable.data = []
              }
              this.dataTable.loading = false
            }
          })
      },
      // 列表数据处理
      formatData(list) {
        return list.map(item => {
          return {
            id: item.id,
            orderNo: item.orderNo,
            payTime: item.payTime !== null && item.payTime !== "" ? formatDate.timeFormat(item.payTime) : "",
            supplyTelphone: item.supplyTelphone,
            supplyEnterpriseName: item.supplyEnterpriseName,
            enterpriseName: item.enterpriseName,
            orderAmount: item.orderAmount,
            payType: item.payType,
            infoAmount: item.infoAmount,
            settleAmount: item.settleAmount,
            settleStatus: item.settleStatus,
            settleTime: item.settleTime !== null && item.settleTime !== "" ? formatDate.timeFormat(item.settleTime) : ""
          }
        })
      },
      // 查看详情
      showDetail(row) {
        this.isShowDetail = true
        this.$refs.OrderInfoFeeSettlementDetail.getSettleOrderInfo(row.id)
      },
      // 导出
      exportInfo(){
        this.exportLoading = true;
        let info = formatData.clearObjEmptyPrama({...this.searchInfo, pageSize: this.pageSize, pageNum: this.currentPage})
        ajax.export(apis.factory.exportSettleOrderList, info)
          .then(res => {
            this.exportLoading = false;
          })
      },
      onSearch() {
        this.currentPage = 1
        this.getList()
      },
      // 搜索表单重置
      resetForm(formName) {
        // this.$refs[formName].resetFields();
        this.searchInfo = {...this.searchInfoBack}
      },
      // 切换页面
      currentPageChange(pageNo) {
        this.currentPage = pageNo
        this.getList()
      },
      // 切换页面条数
      pageSizeChange(pageNo) {
        this.pageSize = pageNo
        this.getList()
      },
      // 刷新页面
      refreshPage() {
        this.currentPage = 1
        this.pageSize = 10
        this.searchInfo = {...this.searchInfoBack}
        this.getList()
      }
    },
    created() {
      this.init()
      this.getList()
    }
  }
</script>

<style scoped>

</style>
